CoInput
tags: coform
CoInput est un librairie qui permet de construire de forme complexe avec un minimum de code.
Utilisation de base
Pour l’utiliser il faut juste instancier l’objet CoInput en specifiant les options.
var coInput = new CoInput({
//options
container:"#co-inputs",
inputs:[
{
type:"inputSimple",
options:{
label:"Nom",
name:"firstName"
}
},
{
type:"inputSimple",
options:{
label:"Prénom",
name:"lastName"
}
}
],
onchange:function(name, value){
console.log(name, value)
}
})

⥅ [[https://codimd.communecter.org/uploads/upload_7ea3b4d88ab4dae02ad89671e74139b2.png]]
Options
- container (obligatoire)
C’est une chaine de caractère (string) specifiant le selecteur de l’element qui va contenir les inputs.
- |
| "accentColor" | accent-color | inputSimple | la couleur d’accentuation |
| "alignItems" | align-items | groupButtons | alignement d’un objet au sein de son conteneur |
| "alignSelf" | align-self | groupButtons | alignement des objets flexibles d’une ligne flexible |
| "all" | all | select | réinitialiser toutes les propriétés d’un élément |
| "animationDelay" | animation-delay | inputRange | durée d’attente avant de démarrer une animation |
| "animationDirection" | animation-direction | select | sens de l’animation |
| "animationDuration" | animation-duration | inputRange | durée d’une animation pour parcourir un cycle. |
| "animationFillMode" | animation-fill-mode | select | la façon dont une animation applique les styles avant et après exécution. |
| "animationIterationCount" | animation-iteration-count | inputRange | le nombre de cycles utilisés pour répéter une animation |
| "animationName" | animation-name | inputSimple | le nom de l’animation qui doivent appliquées à l’élément |
| "animationTimingFunction" | animation-timing-function | select | la façon dont une animation CSS se déroule au fur et à mesure de chaque cycle |
| "backdropFilter" | backdrop-filter | inputSimple | diffusion de la couleur sur la zone derrière l’élément |
| "backfaceVisibility" | backface-visibility | select | face arrière visible lorsqu’elle est orientée vers l’utilisateur. |
| "backgroundType" | background | inputGroup | [background-color, background-image]: Couleur et image d’un arrière-plan d’un elt |
| "backgroundAttachment" | background-attachment | select | position de l’image d’arrière-plan fixée dans la zone d’affichage |
| "backgroundBlendMode" | background-blend-mode | select | images d’arrière-plan fusionnées entre elles et avec l’arrière-plan. |
| "backgroundClip" | background-clip | select | l’arrière-plan d’un élément s’étend sous la boîte de contenu |
| "background" | background | colorPicker | arrière-plans d’un élément |
| "backgroundColor" | background-color | colorPicker | la couleur utilisée pour l’arrière-plan d’un élément |
| "backgroundImage" | background-image | inputFile | définir image comme arrière-plan |
| "backgroundOrigin" | background-origin | select | l’origine de l’arrière-plan background-image |
| "backgroundPosition" | background-position | inputSimple | la position initiale pour chaque image arrière-plan |
| "backgroundRepeat" | background-repeat | select | la façon d’image utilisé en arrière-plan sont répétées |
| "backgroundSize" | background-size | select | la taille des images d’arrière-plan pour l’élément |
| "border" | border | inputBorderSingle | les propriétés liées à la bordure |
| "borderWidth" | border-width | inputSimple | largeur de la bordure d’un élément |
| "borderColor" | border-color | colorPicker | couleur de la bordure d’un élément |
| "borderStyle" | border-style | select | le style des lignes utilisées pour les bordures des 4 côtés d’un élément |
| "borderRadius" | border-radius | inputGroup | les coins arrondis pour la bordure d’un élément |
| "borderBottomLeftRadius" | border-bottom-left-radius | inputNumber | le rayon de courbure de la bordure pour le coin en bas à gauche de l’élément |
| "borderBottomRightRadius" | border-bottom-right-radius | inputNumber | le rayon de courbure de la bordure pour le coin en bas à droite de l’élément |
| "borderTopLeftRadius" | border-top-left-radius | inputNumber | le rayon de courbure de la bordure pour le coin en haut à gauche de l’élément |
| "borderTopRightRadius" | border-top-right-radius | inputNumber | le rayon de courbure de la bordure pour le coin en haut à droite de l’élément |
| "bottom" | bottom | inputSimple | définition de l’emplacement vertical des éléments positionnés |
| "boxShadow" | box-shadow | inputShadow | ajout des ombres à la boîte d’un élément |
| "boxSizing" | box-sizing | select | la façon dont la hauteur et la largeur totale d’un élément est calculée |
| "breakAfter" | break-after | select | la façon dont la page, la colonne ou la région se fragmente après la boîte générée |
| "breakBefore" | break-before | select | la façon dont la page, la colonne ou la région se fragmente avant la boîte générée |
| "breakInside" | break-inside | select | comment la page, la colonne ou la région se fragmente au sein de la boîte générée |
| "captionSide" | caption-side | select | choisir l’emplacement de la légende d’un tableau |
| "caretColor" | caret-color | colorPicker | la couleur du curseur visible à l’endroit où l’utilisateur peut ajouter du contenu |
| "clear" | clear | select | indique si un élément peut situé à côté d’éléments flottants qui le précèdent |
| "color" | color | colorPicker | la couleur de premier plan d’un élément texte et de ses éventuelles décorations |
| "clipPath" | | inputSimple | empêche une portion d’un élément d’être affichée |
| "colLg" | | select | grid system de bootstrap col-lg |
| "colMd" | | select | grid system de bootstrap col-md |
| "cursor" | cursor | select | la forme du curseur lorsque le pointeur est au-dessus de l’élément |
| "direction" | direction | select | paramétrée afin de correspondre à la direction du texte |
| "display" | display | select | type d’affichage utilisée pour le rendu d’un élément |
| "filter" | filter | filterCssFunction | retourne un nouveau tableau contenant tous les éléments du tableau d’origine |
| "float" | float | select | indique qu’un élément doit être deplacé du flux normal |
| "flexDirection" | flex-direction | select | a façon dont les éléments flexibles sont placés dans un conteneur flexible |
| "font" | font | inputGroup | Selectionner ou charger une police pour la mise en forme de texte |
| "fontFamily" | font-family | inputGroup | Selectionner ou charger une police pour la mise en forme de texte |
| "fontSize" | font-size | inputNumber | définit la taille de police utilisée pour le texte |
| "fontStyle" | font-style | select | définit la style de police utilisée pour le texte |
| "fontVariant" | font-variant | select | définit tous les paramètres typographiques pour une police de caractères |
| "fontWeight" | font-weight | select | définit la graisse utilisée pour le texte |
| "height" | height | inputNumber | la hauteur de la boîte de contenu d’un élément |
| "left" | left | inputNumber | définit une partie de la position des éléments positionnés |
| "letterSpacing" | letter-spacing | inputNumber | définit l’interlettre utilisée pour les caractères qui composent le texte |
| "lineHeight" | line-height | inputNumber | indique la hauteur minimale des lignes au sein de l’élément |
| "margin" | margin | inputGroup | la taille des marges sur les quatre côtés de l’élément |
| "marginBottom" | margin-bottom | inputNumber | la marge basse appliquée à un élément |
| "marginLeft" | margin-left | inputNumber | la marge gauche appliquée à un élément |
| "marginRight" | margin-right | inputNumber | la marge right appliquée à un élément |
| "marginTop" | margin-top | inputNumber | la marge haut appliquée à un élément |
| "maxHeight" | max-height | inputNumber | la hauteur maximale d’un élément donné. |
| "minHeight" | min-height | inputNumber | la hauteur minimale d’un élément donné. |
| "minWidth" | min-width | inputNumber | la largeur minimale d’un élément donné |
| "maxWidth" | max-width | inputNumber | la largeur maximale d’un élément donné |
| "objectFit" | object-fit | select | la façon dont le contenu d’un élément remplacé doit s’adapter à son conteneur |
| "padding" | padding | inputGroup | définir les différents écarts de remplissage sur les quatre côtés d’un élément |
| "paddingBottom" | padding-bottom | inputNumber | ajuste la hauteur de la boîte de remplissage en bas de l’élément |
| "paddingLeft" | padding-left | inputNumber | ajuste la hauteur de la boîte de remplissage à gauche de l’élément |
| "paddingRight" | padding-right | inputNumber | ajuste la hauteur de la boîte de remplissage à droite de l’élément |
| "paddingTop" | padding-top | inputNumber | ajuste la hauteur de la boîte de remplissage en haut de l’élément |
| "overflowX" | overflow-x | select | les mécanismes à utiliser si le contenu dépasse des bords droit-gauche de la boîte |
| "overflowY" | overflow-y | select | les mécanismes à utiliser si le contenu dépasse des bords haut et bas de la boîte |
| "position" | position | select | définit la façon dont un élément est positionné dans un document |
| "right" | right | inputNumber | renvoie la valeur de la coordonnée droite de l’élément |
| "textAlign" | text-align | groupButtons | alignement horizontal d’un élément de bloc ou de la boîte d’une cellule de tableau |
| "textDecorationStyle" | text-decoration-style | select | définit le style appliqué sur les lignes visées par text-decoration-line |
| "textDecorationLine" | text-decoration-line | select | définit la façon dont les décorations linéaires sont ajoutées à un élément |
| "loaderUrl" | | select | url d’un chargement (spinner) |
| "hideOnDesktop" | | checkbox | définit que l’élément n’apparaise pas en mode Desktop (résolution) |
| "hideOnTablet" | | checkbox | définit que l’élément n’apparaise pas en mode Tablet (résolution) |
| "hideOnMobil" | | checkbox | définit que l’élément n’apparaise pas en mode Mobile (résolution) |
| "textDecoration" | text-decoration | select | décorer le texte en ajoutant une ligne sous, sur ou à travers le texte |
| "textDecorationColor" | text-decoration-color | colorPicker | définit la couleur utilisée pour dessiner les lignes décorant le texte |
| "textJustify" | text-justify | select | définit le type de justification à appliquer au texte justifié |
| "textTransform" | text-transform | select | définit la façon d’utiliser les lettres capitales pour le texte d’un élément |
| "textShadow" | text-shadow | inputShadow | ajouter des ombres au texte |
| "transitionDelay" | transition-delay | inputNumber | indique la durée à attendre avant de débuter la transition |
| "transitionDuration" | transition-duration | inputNumber | définit le nombre de secondes ou de millisecondes que doit durer une animation |
| "transitionProperty" | transition-property | inputNumber | désigne les propriétés CSS dont un effet de transition devrait être appliqué |
| "transitionTimingF" | transition-timing-function | select | la façon dont les propriétés CSS affectées par un transition sont calculées |
| "top" | top | inputNumber | définit une partie de la position des éléments positionnés |
| "verticalAlign" | vertical-align | select | définit l’alignement vertical d’une boîte en ligne/bloc ou une cellule de tableau |
| "visibility" | visibility | select | utilisée afin de cacher un élément |
| "width" | width | inputNumber | définir la largeur de la boîte du contenu d’un élément |
| "whiteSpace" | white-space | select | utilisée pour décrire la façon dont les blancs sont gérés au sein de l’élément |